/**
 * Created by SylarSong on 16/12/7.
 */



//************获取上一个月***************
function getPreMonth(date) {
    /**
     * @param: data    例如  new Date()
     * @param: return  时间戳  例如  new Date().getTime()
     * **/
    if (!date)date = new Date();
    var year = date.getFullYear(); //获取当前日期的年份
    var month = date.getMonth(); //获取当前日期的月份
    var day = date.getDate(); //获取当前日期的日
    var oneDay = 1000 * 3600 * 24 * 1;
    var days = new Date(year, month, 0).getDate(); //获取当前日期中月的天数
    var current_time = date.getTime();
    var after_time = current_time - (oneDay * days);
    return after_time;
}
//************获取当前以前N天日期信息***************
function getPerDay(cycle) {
    var res = [];
    var oneDay = 1000 * 3600 * 24 * 1;
    var now = new Date().getTime();
    for (var i = 0; i < cycle; i++) {
        res.push([new Date(now).getMonth() + 1, new Date(now).getDate()].join("-"))
        now -= oneDay;
    }
    return res.reverse()
}

//************制作N个假数据***************
function getRandomData(n, f) {
    var res = [];
    for (var i = 0; i < n; i++) {
        res.push(Math.floor(Math.random() * f));
    }
    return res.reverse();
}
//************获取图标实例******************
var line_bar_pay_rate = echarts.init($('#line-bar-pay-rate')[0]); // 次日留存率+新增用户数
var line_bar_pay_cycle = echarts.init($('#line-bar-pay-cycle')[0]);
var line_bar_pay_rate_all = echarts.init($('#line-bar-pay-rate-all')[0]);

//!!!!!!!!!!!!!!!准备时间!!!!!!!!!!!!!
$(document).ready(function () {
    get_pay_rate(line_bar_pay_rate, getRandomData(7, 100));
    get_pay_cycle(line_bar_pay_cycle);
    get_pay_rate(line_bar_pay_rate_all,getRandomData(7, 100));
    //日按钮时间监听
    $('#btn-newPay-allPay-day').click(function () {
        get_pay_rate(line_bar_pay_rate, getRandomData(1, 100), getPerDay(1),null,'近1日新增用户付费率');
        get_pay_rate(line_bar_pay_rate_all, getRandomData(1, 100), getPerDay(1),null,'近1日总用户付费率');
    });
    //周按钮时间监听
    $('#btn-newPay-allPay-week').click(function () {
        get_pay_rate(line_bar_pay_rate, getRandomData(7, 100), getPerDay(7),null,'近7日新增用户付费率');
        get_pay_rate(line_bar_pay_rate_all, getRandomData(7, 100), getPerDay(7),null,'近7日总用户付费率');
    });
    //月按钮时间监听
    $('#btn-newPay-allPay-month').click(function () {
        get_pay_rate(line_bar_pay_rate, getRandomData(30, 100), getPerDay(30),null,'近30新增用户日付费率');
        get_pay_rate(line_bar_pay_rate_all, getRandomData(30, 100), getPerDay(30),null,'近30日总用户付费率');
    });
});

//!!!!!!!!改变尺寸触发!!!!!!!!!!!!
window.onresize = function () {
    $('#line-bar-pay-rate').width($(".grid-12") - 50);
    line_bar_pay_rate.resize();
    $('#line-bar-pay-cycle').width($(".grid-12") - 50);
    line_bar_pay_cycle.resize();
};

//*新增充值用户数,累计充值用户数概况********************************************
/**
 *
 * @param: instance  echart 实例 例如: echart.init($(******)[0]) 获取
 * @param: date  x周时间信息;
 * @param: data1 数据1 这里新增付费用户数量
 * @param: data2 数据2 这里累计付费用户数量
 * @cycle: 查询周期 , 1,7,30 天
 */
function get_pay_rate(instance, data, date, cycle,title) {

    if (!cycle)cycle = 7;

    if (!date) {
        date = function () {
            var res = [];
            var oneDay = 1000 * 3600 * 24 * 1;
            var now = new Date().getTime();
            for (var i = 0; i < cycle; i++) {
                res.push([new Date(now).getMonth() + 1, new Date(now).getDate()].join("-"))
                now -= oneDay;
            }
            return res.reverse()
        }();
    }
    if(!title)title='近7日付费率';
    if (!data) {
        data = getRandomData(cycle, 100);
    }


    option = {
        title: {
            text: title,
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'+'%'

        },
        legend: {
            left: 'left',
            data: ['付费率']
        },
        xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data: date
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
            }
        },
        series: [
            {
                name: '付费率',
                type: 'line',
                data: data,
                barWidth:50
            }
        ]
    };
    console.log(data.length==1);
    if(data.length==1){
        option.series.type='bar';
    }else{
        option.series.type='line';
    }
    console.log(option.series.type);
    instance.setOption(option);
}

//*新增充值用户数,累计充值用户数概况********************************************

function get_pay_cycle(instance, data) {

    var builderJson = {
        "all": 10887,
        "charts": {
            ">12周": 1592,
            "9~12周": 1624,
            "8周": 1842,
            "7周": 2090,
            "6周": 1762,
            "5周": 1593,
            "4周": 2060,
            "3周": 1537,
            "2周": 1908,
            "4~7日": 2107,
            "2~3日": 2405,
            "首日": 7355
        },
        "ie": 9743
    };

    var downloadJson = {
        "echarts.min.js": 17365,
        "echarts.simple.min.js": 4079,
        "echarts.common.min.js": 6929,
        "echarts.js": 14890
    };


    option = {
        backgroundColor: {
            type: 'pattern',
            repeat: 'repeat'
        },
        tooltip: {
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: [{
            text: '付费周期区间人数',
            subtext: '总计 ' + builderJson.all,
            x: '25%',
            textAlign: 'center'
        }, {
            text: '各区间占比',
            subtext: '总计 ' + Object.keys(builderJson.charts).reduce(function (all, key) {
                return all + builderJson.charts[key];
            }, 0),
            x: '84%',
            textAlign: 'center'
        },],
        grid: [{
            top: 50,
            width: '60%',
            bottom: '0%',
            left: 10,
            containLabel: true
        }],
        xAxis: [{
            type: 'value',
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            splitLine: {
                show: true
            }
        }],
        series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
                normal: {
                    position: 'right',
                    show: true
                }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.charts[key];
            })
        }, {
            type: 'pie',
            radius: [0, '60%'],
            center: ['85%', '50%'],
            data: Object.keys(builderJson.charts).map(function (key) {
                return {
                    name: key,
                    value: builderJson.charts[key]
                }
            })
        },],
        color:["#00cc00","#006600","#99ff99","#660000","#99ffcc","#99ffff","#99cc00","#000066","#FF1493","#B452CD","#454545","#EE00EE"]
    }
    instance.setOption(option);
}